<template>
	<view>
		<view class="back" style="margin-top: 24rpx;">
			<view class="a mb_24">
				<image class="img_200" :src="list.goods.gallery_images" mode=""></image>
				<view class="a_b">
					<view>
						<view class="cl_00091A f_32 fw_bold mb_8">{{list.goods.license_plate_number}}</view>
						<view class="cl_333A47 f_28 ">车架号：{{list.goods.frame_number}}</view>
					</view>
					<view class="flex justify_content_between">
						<view style="display: flex;">
							<view class="cl_3377FF f_20" style="margin: 10rpx;background-color: #F7FBFF;padding: 10rpx;" v-for="(item,index) in list.goods.cz_label">
								<!-- <text class="a_but">{{item}}</text> -->
								<!-- <text class="a_but ml_8">小牛</text> -->
								{{item}}
							</view>
						</view>
						<view>
						     <view class="cl_FF6401 f_20" style="height: 68rxp;line-height: 68rpx;">￥<text class="f_32 fw_bold">{{list.goods.moth_money}}</text>/月</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex justify_content_between align_items_center">
				<view class="a_c">店铺地址：{{list.address.address}}</view>
				<image class="img_32" src="../../static/imgs/right.png" mode=""></image>
			</view>
		</view>
		<view class="back">
			<view class="flex justify_content_between align_items_center mb_48">
				<view class="cl_333A47 f_28">租车类型</view>
				<view class="a_xian">
					<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
						<u-radio :customStyle="{marginRight: '20px'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.name" @change="radioChange">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="flex justify_content_between align_items_center">
				<view class="cl_333A47 f_28" style="margin-bottom: 14rpx;">租车日期</view>
				<view class="a_xian flex justify_content_between align_items_center">
					<u--input placeholder="请填写租期数" type="number" border="none" v-model="value" @change="zqs"></u--input>
					<view class="cl_333A47 f_28" v-if="radiovalue1_type==2">月</view>
					<view class="cl_333A47 f_28" v-else>日</view>
				</view>
				
			</view>
		</view>
		<view class="back" >
			<view class="flex justify_content_between align_items_center mb_48">
				<view class="cl_333A47 f_28" style="margin-bottom: 14rpx;">所在地区</view>
				<view class="a_xian flex justify_content_between align_items_center">
					<CityPicker class="fl-1 text_a_r" @getdata="getdata" :title="address||'请选择地区'"></CityPicker>
					<!-- <u--input placeholder="请选择所在地区" border="none"  v-model="value1" @change="change1"></u--input> -->
					<image class="img_32" src="../../static/imgs/right.png" mode=""></image>
				</view>
			</view>
			<view class="flex justify_content_between align_items_center mb_48">
				<view class="cl_333A47 f_28" style="margin-bottom: 14rpx;">详细地址</view>
				<view class="a_xian flex justify_content_between align_items_center">
					<u--input placeholder="请填写详细地址" border="none" v-model=" value2" @change="change2"></u--input>
				</view>
			</view>
			<view class="flex justify_content_between align_items_center mb_48">
				<view class="cl_333A47 f_28" style="margin-bottom: 14rpx;">联系电话</view>
				<view class="a_xian flex justify_content_between align_items_center">
					<u--input placeholder="请填写您的联系电话" border="none" v-model="value3" @change="change3"></u--input>
					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode"
							@change="codeChange">
					</u-code>
					<text  class="f_28 cl_3377FF" @click="getCode()">{{tips}}</text>
					<!-- <view class="cl_3377FF f_28">获取验证码</view> -->
				</view>
			</view>
			<view class="flex justify_content_between align_items_center">
				<view class="cl_333A47 f_28" style="margin-bottom: 14rpx;">验证码</view>
				<view class="a_xian flex justify_content_between align_items_center">
					<u--input placeholder="请填写验证码" border="none" v-model="value4" @change="change4"></u--input>
				</view>
			</view>
		</view>
		<view class="back">
			<view class="flex justify_content_between align_items_center">
				<view class="cl_333A47 f_28" style="margin-bottom: 14rpx;">优惠券</view>
				<view class="a_xian flex justify_content_between align_items_center" @click="yhq()" >
					<u--input placeholder="请选择优惠券" border="none"  v-model="coupon_title" @change="change5" readonly ></u--input>
					
					<image class="img_32" src="../../static/imgs/right.png" mode=""></image>
				</view>
			<!-- 	<view class="a_xian flex justify_content_between align_items_center" v-else>
					<u--input placeholder="暂无优惠券" border="none" readonly></u--input>
					
					<image class="img_32" src="../../static/imgs/right.png" mode=""></image>
				</view> -->
			</view>
		</view>
		<view class="back">
			<view class="cl_333A47 f_28" style="margin-bottom: 14rpx;">身份证</view>
			<view class="a_d mb_24">
				<u-upload
					:fileList="fileList6"
					@afterRead="afterRead"
					@delete="deletePic"
					name="6"
					multiple
					:maxCount="1"
					width="250"
					height="150"
				>
					<image class="img_526" :src="urls+ 'sfz1.png'" mode=""></image>
				</u-upload>
				
			</view>
			<view class="a_d">
				<u-upload
					:fileList="fileList7"
					@afterRead="afterRead"
					@delete="deletePic"
					name="7"
					multiple
					:maxCount="1"
					width="250"
					height="150"
				>
					<image class="img_526" :src="urls+ 'sczj.png'" mode=""></image>
				</u-upload>
			</view>
		</view>
		<view style="height: 140rpx;"></view>
		<image class="bot_img" src="../../static/imgs/xian.png" mode=""></image>
		<view class="bottom flex justify_content_between align_items_center">
			<view>
				<view class="flex align_items_end">
					<text class="cl_333A47 f_24">合计:</text>
					<view class="cl_FF6401 f_24">￥<text style="font-size: 40rpx;">{{actual_price.toFixed(2)}}</text></view>
				</view>
				<view class="cl_999CA3 f_24">
					  押金
					<text class="cl_00091A">
						￥{{list.goods.deposit}}
					</text>
					<text style="margin-left: 10rpx;">
						租金
					</text>
					<text class="cl_00091A">
						￥{{order_price.toFixed(2)}}
					</text>
					
					<text style="margin-left: 10rpx;" v-if="coupon_id>0">
						优惠
					</text>
					<text class="cl_00091A" v-if="coupon_id>0">
						￥{{coupon_price}}
					</text>
					
				</view>
			</view>
			<view class="cl_fff f_28 buuttom" @click="tj()">立即租车</view>
		</view>
		<u-picker :show="ts_show" :columns="ts_columns" @cancel="ts_show = false" @confirm="ts_confirm" keyName="label"></u-picker>
		<u-popup :show="couponShow" :round="10" mode="bottom" @close="close" @open="open" >
		    <view>
		        <u-radio-group v-model="radiovalue13" placement="column" @change="groupChanges" iconPlacement="right">
		            <u-radio
		                :customStyle="{
		                    margin: '8px 16px',
		                    background: '#FFEFE5',
		                    padding: '16px'
		                }"
		                v-for="(item, index) in coupon"
		                :key="index"
		                :label="index"
		                :name="index"
		                @change="radioChange"
		            >
		                <view class="flex couponBox">
		                    <view class="discount">
		                        <view style="font-size: 52rpx">{{ item.coupon_price }}</view>
		                        <view>{{ item.coupon_text }}</view>
		                    </view>
		                    <view class="title">
		                        <view>{{ item.coupon_title }}</view>
		                        <view class="time">有效期至{{ item.useageend_time }}</view>
		                    </view>
		                </view>
						
		            </u-radio>
		            <view class="couponBtn" @click="submit">确认</view>
		        </u-radio-group>
		    </view>
		</u-popup>
	</view>
	
</template>

<script>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	export default {
		data() {
			return {
				// 基本案列数据
				radiolist1: [{
						name: '日租',
						disabled: false
					},
					{
						name: '月租',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '日租',
				radiovalue13:-1,
				radiovalue1_type: 1,
				value: '',
				value1: '',
				value2: '',
				value3: '',
				value4: '',
				value5: '',
				id:0,
				list:'',
				ts_show: false,
				ts_columns: [],
				address:'',
				actual_price:0,
				order_price:0,
				coupon_price:0,
				coupon_title:'',
				coupon_id:0,
				fileList6: [],
				fileList7: [],
				image6: [],
				image7: [],
				urls:'',
				show:false,
				couponShow:false,
				seconds:60,
				tips:'获取验证码',
				phone:'',
				codes:'',
				coupon:[],
				// xz_coupon:'',
			};
		},
		onLoad(e) {
			this.id=e.id
			this.lists()
			
		},
		onShow() {
			this.urls = this.$.ajax_url2+'/imgs/';
		},
		methods: {
			open() {
			         this.couponShow=true
			       },
			close() {
			  this.couponShow = false
			  // console.log('close');
			},
            yhq(){
				this.$.ajax(1,"POST","index/money_coupon_list",{
					money:this.order_price,
				},(res)=>{
				  if(res.code==200){
					    	console.log(res.data)
							if(res.data.length>0){
								this.coupon=res.data;
								// this.radiovalue13=res.data[0].id
								// this.xz_coupon=res.data[0];
								this.show=true
								this.couponShow=true
								
							}else{
								this.$.ti_shi('暂无可用优惠券');
							}
							
							
				  }else{
				     this.$.ti_shi(res.msg);
				  }
				})
				
			},
			getdata(e){
				if(e=='全部'){
					this.address=''
				}else{
					this.address=e
				}
				
			},
			lists(){
				
			 let data={
					 goods_id:this.id,
			    }
		
				this.$.ajax(1,"POST","index/details_of_electric_vehicle_rental",data,(res)=>{
				  if(res.code==200){
						this.list = res.data
						
				  }else{
				     this.$u.toast(res.msg);
				  }
				})
			},
			tj(){
				if(!this.value){
					this.$.ti_shi('请填写租车日期');
					return;
				}
				if(!this.address){
					this.$.ti_shi('请选择所在地区');
					return;
				}
				if(!this.value2){
					this.$.ti_shi('请填写详细地址');
					return;
				}
				if(!this.value3){
					this.$.ti_shi('请填写联系电话');
					return;
				}
				if(!this.value4){
					this.$.ti_shi('请填写验证码');
					return;
				}
				if(!this.image6.join(',')){
					this.$.ti_shi('请上传身份证正面');
					return;
				}
				if(!this.image7.join(',')){
					this.$.ti_shi('请上传身份证反面');
					return;
				}
				
			 let data={
					 goods_id:this.id,
					 lease_type:this.radiovalue1_type,
					 lease_term:this.value,
					 address:this.address,
					 detailed_address:this.value2,
					 mobile:this.value3,
					 code:this.value4,
					 deposit:this.list.goods.deposit,
					 order_price:this.order_price,
					 actual_price:this.actual_price,
					 id_card_front_image:this.image6.join(','),
					 id_card_back_image:this.image7.join(','),
					 join_merchant_id:this.list.address.id,
					 product_id:this.list.goods.id,
					 coupon_price:this.coupon_price,
					 coupon_id:this.coupon_id,
					 is_type:'zc_mobile',
			    }   
				// console.log(data);return;	
				this.$.ajax(1,"POST","index/electric_vehicle_rental_payment",data,(res)=>{
					var that=this
				  if(res.code==200){
					  
					  console.log(res.data.nonceStr)
					  uni.requestPayment({
					  	provider: "weixin",
					  	timeStamp: res.data.timeStamp,
					  	nonceStr: res.data.nonceStr,
					  	package: res.data.package,
					  	signType: res.data.signType,
					  	paySign: res.data.paySign,
					  	success: function (ress) {
					  		setTimeout(() => {
					  			uni.navigateBack({
					  				delta:1
					  			})
					  		}, 1000);
					  	},
					  	fail: function (err) {
							 console.log(err)
					  		that.$.ti_shi(err)
					  	}
					  });
				       // this.$.ti_shi(res.msg);
				  	  
				  }else{
				     this.$.ti_shi(res.msg);
				  }
				})
			},
			groupChange(n) {
				if(n=='日租'){
					this.radiovalue1_type=1
					this.order_price= (Number(this.list.goods.day_money)*Number(this.value))
					
				}
				if(n=='月租'){
					this.radiovalue1_type=2
					this.order_price= (Number(this.list.goods.moth_money)*Number(this.value))
				}
				this.actual_price=Number(this.order_price)+Number(this.list.goods.deposit)
				console.log('groupChange', n,this.radiovalue1_type);
			},
			groupChanges(n){
				this.radiovalue13=n
			},
			submit(){
		
					this.coupon_price=this.coupon[this.radiovalue13].coupon_price
					this.coupon_title=this.coupon[this.radiovalue13].coupon_title
					this.coupon_id=this.coupon[this.radiovalue13].id
					console.log(this.coupon_price,this.coupon_title,this.coupon_id)
					this.show=false
					this.couponShow=false
					this.actual_price=(Number(this.order_price)+Number(this.list.goods.deposit))-Number(this.coupon_price)
				
				
			},
			zqs(e){
				
				if(this.radiovalue1_type==1){
					this.order_price= (Number(this.list.goods.day_money)*Number(e))
				}
				if(this.radiovalue1_type==2){
					this.order_price= (Number(this.list.goods.moth_money)*Number(e))
				}
				this.actual_price=Number(this.order_price)+Number(this.list.goods.deposit)
				console.log('zqs', e,this.actual_price);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			change(e) {
				console.log('change', e);
			},
			change1(e) {
				console.log('change', e);
			},
			change2(e) {
				console.log('change', e);
			},
			change3(e) {
				console.log('change', e);
			},
			change4(e) {
				console.log('change', e);
			},
			change5(e) {
				console.log('change', e);
			},
			// 删除图片
			deletePic(event) {
				if(event.name==6){
					this.image6.splice(event.index, 1)
				}
				if(event.name==7){
					this.image7.splice(event.index, 1)
				}
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url,event.name)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url,event_name) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$.ajax_url+'common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							if(event_name==6){
								this.image6.push(JSON.parse(res.data).data.url)
							}
							if(event_name==7){
								this.image7.push(JSON.parse(res.data).data.url)
							}
							console.log(res,event_name)
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			getCode() {
				if(!this.value3){
					   this.$.ti_shi('请输入手机号！')
					   return;
				}
				this.code()
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			},
			code(){
				this.$.ajax(1,"POST","sms/smscode",{
					mobile:this.value3,
					event:'zc_mobile'
				},(res)=>{
				  if(res.code==200){
					    	
							
				  }else{
				     this.$.ti_shi(res.msg);
				  }
				})
			},
			codeChange(text) {
					   console.log(text)
								this.tips = text;
							},
					
		}
	};
</script>

<style>
	page {
		background-color: #F7FAFF;
	}

	.back {
		width: 638rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		margin-left: 32rpx;
	}

	.a {
		display: flex;
		/* justify-content: space-between; */
	}

	.a_b {
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.a_but {
		padding: 8rpx 16rpx;
		background-color: #F7FAFF;
	}

	.a_c {
		width: 598rpx;
		display: block;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.a_xian {
		width: 478rpx;
		padding-bottom: 18rpx;
		border-bottom: 2rpx solid #F7FAFF;
		/* margin-top: 10rpx; */
	}

	.a_d {
		width: 526rpx;
		height: 336rpx;
		background: #F7FAFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding: 32rpx 56rpx;
	}

	.bot_img {
		width: 750rpx;
		height: 40rpx;
		margin-top: 48rpx;
	}

	.bot_img {
		width: 750rpx;
		height: 40rpx;
		background: #FFFFFF;
		/* border-radius: 0rpx 0rpx 0rpx 0rpx; */
		/* padding: 16rpx 32rpx; */
	}

	.bottom {
		width: 686rpx;
		height: 76rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 16rpx 32rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 8888;
	}

	.buuttom {
		width: 176rpx;
		height: 76rpx;
		background: linear-gradient(to left, #FF6401 0%, #FF924D 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		text-align: center;
		line-height: 76rpx;
	}

</style>
<style scoped lang="scss">
	.couponBox {
		
	    .discount {
	        color: #ff6401;
	        font-size: 24rpx;
	        text-align: center;
	    }
		
	    .title {
	        color: #00091a;
	        font-size: 32rpx;
	        margin-left: 66rpx;
	    }
	    .time {
	        color: #999ca3;
	        font-size: 28rpx;
	        display: block;
	        margin-top: 16rpx;
	    }
	}
	.couponBtn {
	    margin: 24rpx auto;
	    width: 686rpx;
	    height: 100rpx;
	    border-radius: 24rpx;
	    background: #3377ff;
	    text-align: center;
	    line-height: 100rpx;
	    color: white;
	    font-size: 32rpx;
	    font-weight: bold;
	}
</style>